<template>
	<view class="page-content" :style="{'--main-color-1':configInfo.mainColor,'--main-color-2':configInfo.mainColor1}">
		<m-loading :show="listLoad" :emptyShow="list.data.length <= 0"></m-loading>
		<view class="article-list" v-if="!listLoad">
			<view class="section-bg item p-md m-md radius-5" v-for="(item,index) in list.data" :key="index" @click="$util.go('article/article_detail?id='+item.id)">
				<view class="flex-between">
					<view class="u-left flex-start" style="align-items: flex-start;flex-wrap: nowrap;width:100%">
						<view class="e-thumb" v-if="item.thumb">
							<u--image :showLoading="true" :src="item.thumb_url" height="50px" width="100%" @click="click"></u--image>
						</view>
						<view style="width:75%">
							<view class="e-title u-line-2 text-sm">{{ item.title }}</view>
							<view class="e-excerpt text-xs text-secondary">
								{{ item.excerpt  }}
							</view>
							<view class="e-time m-t-xs">{{ item.create_time }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="status" :content-text="contentText" v-if="showLoading"></uni-load-more>
		
		<!-- 侧边小工具 -->
		<side-tools :scrollTop="scrollTop"></side-tools>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				id:'',
				showLoading:false,
				status:"loading",
				listLoad:true,
				scrollTop: 0,
			}
		},
		computed: mapState({
			userInfo: state => state.user.userInfo,
			configInfo: state => state.config.configInfo,
			param: state => state.content.articleParam,
			list: state => state.content.articleList,
			contentText: state => state.content.contentText,
		}),
		async onLoad(option) {
			this.id = option.id;
			if(!this.id){
				// 数据不存在或无权限
				this.$util.goNavigateBack();
			}
		},
		onReady(){
			// if(this.$wechat.isWechat()) this.$util.navTitle()
		},
		onShow(){
			this.initArticleList();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		async onPullDownRefresh(){
			await this.initArticleList();
			this.$util.showToast(this.$t('app.renovate.success'),function(){
				uni.stopPullDownRefresh();
			});
		},
		async onReachBottom(){
			if (this.list.current_page >= this.list.last_page || this.ListLoad){
				this.status="nomore";
				return
			};
			this.status = "loading";
			this.showLoading = true;
			this.getList(this.param.page + 1);	
		},
		methods: {
			...mapActions(['getArticleList']),
			...mapMutations(['updateContentState']),
			
			async initArticleList(){
				if(this.id){
					let cata = await this.$api.content.getArticleCateInfo(this.id);
					if(cata){
						uni.setNavigationBarTitle({
							title: cata.data.title
						});
					}
				}
				await this.getList();
			},
			
			async getList(page = 0){
				let param = uni.$u.deepClone(this.param)
				if (page)param.page = page
				param.id = this.id
				this.updateContentState({
					key: 'articleParam',
					val: param
				})
				await this.getArticleList(param)
				this.listLoad = false
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color:var(--theme-page-bg);
	}
	.article-list{
	/* 		flex-wrap: nowrap; */
			.item{
				padding: 10px;
				overflow: hidden;
			}
			.e-thumb{
				width: 70px;
				border-radius: 5px;
				overflow: hidden;
				margin-right: 10px;
			}
			.e-title{
				font-size: 32rpx;
				margin-bottom: 2px;
			}
			.e-time{
				font-size: 26rpx;
				color: $incolor-2;
			}
			.e-cate{
				background-color: var(--main-color-1);
			}
		}
</style>
